<!DOCTYPE html>
<html lang="en" data-color-mode="light" data-light-theme="light">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- markdown 样式 -->
    <link rel="stylesheet" href="./css/md_themes/github-markdown-light.css">
    <!-- 代码高亮样式 -->
    <link rel="stylesheet" href="./js/lib/highlight/styles/panda-syntax-light.min.css">
    <link rel="stylesheet" href="./css/theme.css">
    <link rel="stylesheet" href="./css/icon.css">
    <!-- <link rel="stylesheet" href="./css/md_themes/github-markdown.css">     -->
    <link rel="stylesheet" href="./css/component.css">
    <link rel="stylesheet" href="./css/style.css">

    <!-- 类似 github 的 light风格-->
    <script src="js/lib/jquery-3.6.0.min.js"></script>
    <!-- <script src="./js/lib/layer3.5.1/layer.js"></script> -->
    <script src="./js/lib/jquery.contextMenu.min.js"></script>
    <script src="./js/lib/highlight/highlight.min.js"></script>
    <script src="./js/lib/showdown.min.js"></script>

    <script src="./js/pageinit.js"></script>
    <script src="./js/pager.js"></script>

    <title>Chat-GPT</title>
</head>
<style>
    .status-bar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
    }

    .status-bar .logo-block {
        flex-basis: 60px;
        line-height: 60px;
        box-sizing: border-box;
        text-align: center;
    }

    .status-bar .logo-block i {
        font-size: 2em;
    }

    .status-bar .logo-block h1 {
        font-size: 1.5em;
        display: inline-block;
    }

    .status-bar .logo-block .version {
        font-size: 0.8em;
    }

    .status-bar .list-block {
        flex-grow: 1;
        overflow-y: auto;
    }
</style>

<body>
    <!-- 左侧状态栏 -->
    <div class="status-bar folded">
        <div class="logo-block">
            <i>&#xe610;</i>
            <h1>Chat-GPT</h1>
            <span class="version">V<span id="version-value">1.0.0</span></span>
        </div>
        <div class="list-block">
            <div class="scoll-list">
                <!-- 好友列表 -->
                <ul class="characters" id="character-list"></ul>
                
            </div>
            <div class="btm-block">
                <span id="copy-right">© Muihd <span class="year">2023</span></span>
            </div>
        </div>
    </div>
    <!-- 右侧主面板 -->
    <div class="chat-view">
        <div class="container-box">
            <div class="title-box">
                <div class="name-block">
                    <span class="aiName" id="aiName">小白猿</span>
                    <span class="entering" style="visibility:hidden">（对方正在输入...）</span>
                </div>
                <div class="order-block">
                    <div class="btn btn-brief" id="more-btn"><i class="icon">&#xec1c;</i></div>
                </div>
            </div>
            <!-- 对话栏 -->
            <div class="chat-panel">
                <!-- 滚动到底部按钮 -->
                <div class="backbtm" id="backbtm">
                    <span><i>&#xe632;</i> 回到底部</span>
                </div>
                <div class="chatpanel-list" id="chatpanel-list">

                </div>
            </div>
            <div class="quesion-panel">
                <div class="rezise"></div>
                <div class="input-block">
                    <textarea id="quesion-text" placeholder="在此描述你的问题..."></textarea>
                </div>
                <div class="sendbtn-block">
                    <div class="left">
                        <div class="rem-len">
                            <span id="input-remlen">0</span>/<span id="input-maxlen">1500</span>
                        </div>
                    </div>
                    <div class="right">
                        <button id="clear-btn" class="icon btn">&#xe680;&nbsp;清空</button>
                        <button id="send-btn" class="icon btn btn-primay">&#xe60d;&nbsp;发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<!-- 机器人气泡模板 -->
<script type="text/html" id="tpl-aiMsg">
    <div class="chat-item left type-msg">
        <div class="avatar">
            <img class="head-img" src="./img/aihead.jpg">
        </div>
        <div class="content">
            <div class="bubble">
                <div class="top-bar"></div>
                <div class="msg-content markdown-body"></div>
                <div class="btm-bar"></div>
            </div>
        </div>
    </div>
</script>

<!-- 用户气泡模板 -->
<script type="text/html" id="tpl-userMsg">
    <div class="chat-item right type-msg">
        <div class="content">
            <div class="bubble">                
                <div class="top-bar"></div>
                <div class="msg-content"></div>
                <div class="btm-bar"></div>
            </div>
        </div>
        <div class="avatar">
            <img class="head-img" src="./img/userhead.jpg" alt="">
        </div>
    </div>
</script>

<!-- 时间模板 -->
<script type="text/html" id="tpl-timeMsg">
    <div class="chat-item type-time">
        <div class="value">20:58</div>
    </div>
</script>

<!-- 好友模板 -->
<script type="text/html" id="tpl-character">
    <li class="character-item" id="">
        <span class="time"></span>
        <div class="head-box">                            
            <img class="head-img" src="" alt="">
        </div>
        <div class="info-box">            
            <p class="name">小白猿</p>
            <p title="原始的对话模型" class="desc" >🙂原始的对话模型</p>
        </div>
    </li>
</script>

<!-- 对话框模板 -->
<script type="text/html" id="tpl-chatpanel">
    <div class="scroll-chatpanel">
         <!-- 对话框 -->
         <div class="chat-box" id="chat-box"></div>
   </div>
</script>

</html>